<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        span:nth-of-type(2){
            font-weight: bold;
            font-style: italic;
            font-size: 18px;
            font-family: 宋体;
            font-family: 楷体;
            font-family: "Microsoft Yahei";
            font-family: 楷体, 宋体, Sans-serif;
        }

        b{
            font-weight: normal;
        }

        i{
            font-style: normal;
        }

        #box{
            width: 500px;
            height: 100px;
            background: pink;
            line-height: 100px;
        }

        p{
            /* 错误写法 */
            /* font: 楷体 40px;   */
            /* font: italic  40px/100px 楷体 bold; */


            /* 正确写法 */
            /* font: 40px 楷体;   */
            /* font: bold 40px 楷体; */
            /* font: bold italic 40px 楷体; */
            /* font: bold italic 40px/100px 楷体; */
            font: italic bold 40px/100px 楷体;
        }


    </style>
</head>
<body>
    <!--   

        span标签: 没有任何样式的标签

        1. 详写
            font-weight:    字体加粗
                             bold       加粗
                             normal     普通
            font-style:     字体倾斜
                             italic     倾斜
                             normal     普通
            font-size:      字体大小
                             px, %, em 等

                             不同的浏览器, 对于字体大小下限不一致, 建议: 不要使用下限值
                             例如: chrome 下限值: 12px
                                   firefox 下限值: 0px

            font-family     字体家族
                             宋体
                             楷体
                             黑体
                             Microsoft Yahei
                             ...

                             通用字体  (一般写在font-family 的最后面)
                             Serif
                             Sans-serif
                             Monospace
                             ...

                             多个字体之间用 ,(逗号) 隔开
                             字体名如果有空格, 建议加上引号
        
        2. 行高
            line-height: px 或 % 

            实现"一行文字"垂直居中:
                line-height: 与元素一样的高度  (在当前元素内实现垂直居中)

            line-height 不适合多行文字

        3. 简写
            完整font: [weight] | [style] size[/line-height] family
            基础font: size family

            注意: 
             * font 讲究先后顺序
             *
             * |  竖线前后两个词可以颠倒顺序
             * [] 中括号内的词可写可不写

    -->
    
    <span>老母鸡</span>
    <span>老母鸡</span>
    <b>老母鸡</b>
    <i>老母鸡</i>

    <div id="box">
        黄焖鸡米饭<br>
        <!-- 老鸭粉丝汤 -->
    </div>


    <p>石锅煲仔饭</p>





</body>
</html>